<script setup lang="ts">
import type { CheckHealthPackageDetailRespVO, CheckHealthPackageRespVO } from '@/api/check-health-package';
import { computed, ref } from 'vue';
import { CheckHealthPackageApi } from '@/api/check-health-package';
import AuthBar from '@/components/authBar/index.vue';
import Empty from '@/components/empty/index.vue';
import { DictKeyEnum } from '@/enums/dict.enums';
import { useRequest } from '@/hooks/useRequest';
import { useDictStore } from '@/store/dictStore';
import { isEmpty } from '@/utils/is.utils';
import { withQueryString } from '@/utils/router.utils';
import PlanMorePopup from './components/planMorePopup.vue';

const { getDictLabel, getDictCodeList } = useDictStore();

// 获取套餐类型
const packageTypeList = computed(() => {
  return [{ label: '全部', value: '' }, ...getDictCodeList(DictKeyEnum.CHECK_PACKAGE_TYPE)];
});

const selectPackageType = ref('');

function handleSelectPackageType(value: string) {
  selectPackageType.value = value;
  getPackageList();
}

const {
  data: examPlans,
  runAsync: getPackageList
} = useRequest(() => CheckHealthPackageApi.getPackageList({ type: selectPackageType.value }));

const expandedKeys = ref<number[]>([]);

const isExpanded = computed(() => {
  return (id: number) => {
    return !isEmpty(expandedKeys.value) && expandedKeys.value.includes(id);
  };
});

// 体检套餐详情
const packageDetailList = ref<Record<number, CheckHealthPackageDetailRespVO>>({});

// 切换展开/收起状态
function toggleExpand(plan: CheckHealthPackageRespVO) {
  if (isExpanded.value(plan.id)) {
    expandedKeys.value = expandedKeys.value.filter(id => id !== plan.id);
    // 移除套餐详情
    delete packageDetailList.value[plan.id];
  }
  else {
    expandedKeys.value.push(plan.id);
    // 获取套餐详情
    CheckHealthPackageApi.getPackageDetail(plan.id).then(detail => {
      packageDetailList.value[plan.id] = detail;
    });
  }
}

const selectedPlan = ref([]);

function handleSelectPlan(plan: CheckHealthPackageRespVO) {
  selectedPlan.value = [plan.id];
}

const planMorePopupRef = ref<InstanceType<typeof PlanMorePopup>>();
function onPreviewAll(plan: CheckHealthPackageRespVO) {
  planMorePopupRef.value?.onOpen(plan);
}

function handleNext() {
  if (isEmpty(selectedPlan.value)) {
    uni.showToast({
      title: '请选择套餐',
      icon: 'none'
    });
    return;
  }
  uni.navigateTo({
    url: withQueryString('/pages/examination/planAppointment', {
      packageId: selectedPlan.value[0]
    })
  });
}
</script>

<template>
  <view class="plan flex-col">
    <AuthBar />
    <view class="flex-1 overflow-auto px-58 pb-60">
      <view class="page-title mt-55">
        选择体检套餐
      </view>
      <view class="page-subtitle">
        请根据您的需求选择合适的体检套餐，点击
        套餐卡片可查看详情
      </view>
      <!-- tags -->
      <view class="tags-block mt-55 flex">
        <view class="tags-block__label">
          套餐类型:
        </view>
        <view class="tags-block__tags ml-40px flex flex-1">
          <view
            v-for="item in packageTypeList" :key="item.value" class="tag"
            :class="{ active: selectPackageType === item.value }"
            @click="handleSelectPackageType(item.value as string)"
          >
            {{ item.label }}
          </view>
        </view>
      </view>

      <template v-if="!isEmpty(examPlans)">
        <!-- 套餐列表 -->
        <view class="plan-list">
          <wd-checkbox-group v-model="selectedPlan">
            <view v-for="plan in examPlans" :key="plan.id" class="plan-item" @click="handleSelectPlan(plan)">
              <view class="plan-item__hd flex">
                <view class="plan-item__icon flex-center">
                  <i class="iconfont icon-jianyanjiancha" />
                </view>
                <view class="plan-hd__content ml-30 flex-1">
                  <view class="flex items-center">
                    <view class="plan-item__title max-w-440 text-truncate">
                      {{ plan.packageName }}
                    </view>
                    <view v-if="plan.isHot" class="plan-hd__content__tag ml-20 flex-shrink-0">
                      热门
                    </view>
                    <view class="plan-hd__content__checkbox ml-auto">
                      <wd-checkbox shape="square" :model-value="plan.id" />
                    </view>
                  </view>
                  <view class="plan-hd__content__desc">
                    {{ getDictLabel(plan.type, DictKeyEnum.CHECK_PACKAGE_TYPE) }} · 约{{ plan.duration }}分钟 · {{ plan.checkItems.length }}项检查
                  </view>
                </view>
              </view>
              <view class="plan-item__content">
                <view class="plan-item__desc mt-40">
                  {{ plan.description }}
                </view>
              </view>
              <view class="plan-item__footer mt-30 flex items-center justify-between">
                <view class="plan-item__price flex items-center">
                  ¥{{ plan.price }}
                  <view class="plan-item__price__old ml-10">
                    ¥{{ plan.originalPrice }}
                  </view>
                </view>
                <view class="plan-item__detail" @click.stop="toggleExpand(plan)">
                  {{ isExpanded(plan.id) ? '收起详情' : '查看详情' }}
                  <wd-icon :name="isExpanded(plan.id) ? 'arrow-up' : 'arrow-down'" size="24px" />
                </view>
              </view>

              <view v-if="isExpanded(plan.id)" class="plan-expand mt-46">
                <!-- 推荐人群 -->
                <view class="plan-expand__section">
                  <i class="iconfont icon-a-lujing3" />
                  <span class="plan-expand__title">推荐人群</span>
                </view>

                <view class="plan-expand__tags flex">
                  <view v-for="(group, gIndex) in plan.targetGroups" :key="gIndex" class="plan-expand__tag">
                    {{ group }}
                  </view>
                </view>

                <!-- 检查项目 -->
                <view class="plan-expand__section mt-23">
                  <i class="iconfont icon-caidan" />
                  <span class="plan-expand__title">主要检查项目</span>
                </view>

                <view class="plan-expand__list">
                  <!-- 只展示前6项 -->
                  <view v-for="(item, iIndex) in packageDetailList[plan.id]?.checkItemFees.slice(0, 6)" :key="iIndex" class="plan-expand__item">
                    <wd-icon name="check-circle-filled" />{{ item.itemName }}
                  </view>
                  <!-- 判断是否需要展示更多的按钮 -->
                  <view v-if="packageDetailList[plan.id]?.checkItemFees.length > 6" class="plan-expand__more mt-20">
                    <wd-icon name="ellipsis" size="24px" /> 还有{{ packageDetailList[plan.id]?.checkItemFees.length - 6 }}项检查项目
                  </view>
                </view>

                <!-- 查看全部 -->
                <view v-if="packageDetailList[plan.id]?.checkItemFees.length > 6" class="plan-expand__preview mt-17" @click="onPreviewAll(plan)">
                  查看全部项目 <i class="iconfont icon-fenxiang" />
                </view>
              </view>
            </view>
          </wd-checkbox-group>
        </view>

        <view class="mt-50 flex-center">
          <view class="next-btn w-708">
            <wd-button block @click="handleNext">
              下一步
            </wd-button>
          </view>
        </view>
      </template>

      <Empty v-else />

      <view class="footer-tips mt-60 px-42 py-32">
        <view class="tips-title">
          <wd-icon name="tips" size="36px" /> 推荐选择
        </view>
        <view class="tips-content">
          首次体检或年度常规体检，建议选择"基础体检套餐"，包含全
          面的基础检查项目。 40岁以上人群建议选择"全面体检套餐"，
          增加肿瘤标志物等检查项目。
        </view>
      </view>
    </view>
    <PlanMorePopup ref="planMorePopupRef" />
  </view>
</template>

<route type="page" lang="json5">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '体检套餐',
    navigationStyle: 'custom'
  }
}
</route>

<style lang="scss" scoped>
.plan {
  height: 100%;
  background: var(--bg-color);
}

.page-title {
  font-size: 60px;
  font-weight: bold;
  color: var(--text-color);
  text-align: center;
}

.page-subtitle {
  text-align: center;
  font-size: 28px;
  color: var(--secondary-text-color);
  max-width: 524px;
  margin: 0 auto;
}

.tags-block {
  background: linear-gradient(180deg, #d8e7ff 40%, #afceff 100%);
  padding: 20px 0px 40px 40px;

  .tags-block__label {
    font-size: 36px;
    font-weight: 500;
    color: var(--text-color);
    margin-top: 24px;
  }

  .tags-block__tags {
    flex-wrap: wrap;

    .tag {
      margin-right: 22px;
      font-size: 36px;
      font-weight: 500;
      color: #3d3d3d;
      padding: 4px 46px;
      border-radius: 100px;
      background: rgba(247, 250, 254, 0.5);
      border: 2px solid rgba(255, 255, 255, 0.5);
      margin-top: 20px;
      &.active {
        background: var(--primary);
        color: #fff;
        border-color: var(--primary);
      }
    }
  }
}

.plan-list {
  --wot-checkbox-bg: transparent;
  .plan-item {
    background: #f5f9ff;
    border-radius: 20px;
    margin-top: 20px;
    padding: 35px;
    .plan-item__hd {
      .plan-item__icon {
        width: 114px;
        height: 114px;
        border-radius: 50%;
        background: #e1ecff;
        .iconfont {
          font-size: 62px;
          color: var(--primary);
        }
      }
      .plan-hd__content {
        .plan-item__title {
          font-size: 48px;
          font-weight: bold;
          color: var(--text-color);
        }

        .plan-hd__content__tag {
          background: #dfecff;
          padding: 6px 35px;
          font-size: 32px;
          color: var(--primary);
          border-radius: 100px;
        }

        .plan-hd__content__checkbox {
          --wot-checkbox-size: 58px;
          --wot-checkbox-icon-size: 36px;
          --wot-checkbox-square-radius: 50%;
          --wot-checkbox-checked-color: var(--primary);
          --wot-checkbox-border-color: var(--primary);
        }
      }

      .plan-hd__content__desc {
        color: #686869;
        font-size: 30px;
      }
    }

    .plan-item__desc {
      color: #3d3d3d;
      font-size: 34px;
    }

    .plan-item__footer {
      .plan-item__price {
        font-size: 46px;
        font-weight: 500;
        color: var(--text-color);
      }
      .plan-item__price__old {
        font-size: 28px;
        color: #686869;
        text-decoration: line-through;
      }

      .plan-item__detail {
        color: var(--primary);
        font-size: 28px;
      }
    }
  }

  .plan-expand {
    border-top: 1px solid #c6dafa;
    padding-top: 45px;

    .plan-expand__section {
      .plan-expand__title {
        color: #3d3d3d;
        font-size: 32px;
        font-weight: 500;
        margin-left: 12px;
      }
      .iconfont {
        font-size: 35px;
      }
    }

    .plan-expand__list {
      .plan-expand__item {
        color: #3d3d3d;
        font-size: 32px;
        margin-top: 15px;
        :deep(.wd-icon) {
          color: var(--primary);
          font-size: 32px;
          margin-right: 14px;
        }
      }

      .plan-expand__more {
        color: var(--secondary-text-color);
        font-size: 24px;
      }
    }

    .plan-expand__preview {
      color: var(--primary);
      font-size: 32px;
      font-weight: 500;
      .iconfont {
        font-size: 28px;
      }
    }

    .plan-expand__tags {
      margin-top: 20px;
      .plan-expand__tag {
        background: #e4eeff;
        color: #686869;
        font-size: 28px;
        padding: 12px 38px;
        border-radius: 100px;
        margin-right: 20px;
      }
    }
  }
}

.next-btn {
  --wot-button-medium-height: 89px;
  --wot-button-medium-fs: 36px;
  :deep(.wd-button) {
    font-weight: bold;
  }
}

.footer-tips {
  background: rgba(247, 250, 254, 0.5);
  border-radius: 20px;
  border: 2px solid rgba(255, 255, 255, 0.5);

  .tips-title {
    color: var(--text-color);
    font-size: 32px;
    font-weight: bold;
  }

  .tips-content {
    font-size: 24px;
    color: var(--secondary-text-color);
    max-width: 660px;
    margin-top: 12px;
    .tips-content__item {
      padding-left: 32px;
      position: relative;
    }
  }
}
</style>
